<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS3圆圈动画放大缩小循环动画效果</title>
		<style>
			.dot {
				margin: 150px auto;
				width: 200px;
				height: 200px;
				background-color: #E3E3E3;
				border-radius: 50%;
				box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset;
				-webkit-animation-name: 'ripple';
				/*动画属性名，也就是我们前面keyframes定义的动画名*/
				-webkit-animation-duration: 2s;
				/*动画持续时间*/
				-webkit-animation-timing-function: ease;
				/*动画频率，和transition-timing-function是一样的*/
				-webkit-animation-delay: 0s;
				/*动画延迟时间*/
				-webkit-animation-iteration-count: infinite;
				/*定义循环资料，infinite为无限次*/
				-webkit-animation-direction: alternate;
				/*定义动画方式*/
			}
			
			@keyframes ripple {
				0% {
					opacity: 0.35;
					width: 190px;
					height: 190px;
				}
				100% {
					opacity: 0.2;
					width: 250px;
					height: 250px;
				}
			}
		</style>
	</head>

	<body>
		<div class="dot"></div>
	</body>

</html>